<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Alpona - A Clean Responsive Flat B3 Admin Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Admin Panel Template">
        <!-- styles -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/font-alpona.css" rel="stylesheet">
        <link href="css/prettify.css" rel="stylesheet">
        <link href="css/styles.css" rel="stylesheet">
        <link href="css/bootstrap-reset.css" rel="stylesheet">
        <!--fav and touch icons -->
        <link rel="shortcut icon" href="ico/favicon.ico">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
        <script src="js/jquery.js"></script>
        <!--[if lt IE 9]>
        <script src="js/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="main-wrapper">
            <div class="scroll-top">
                <a href="#" class="tip-top" title="Go Top"><i class="icon-arrow-up"></i></a>
            </div>
            <!-- TOP BAR -->
            <div class="top-bar">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-4 col-md-4">
                            <a href="#" class="left-toggle"><i class="icon-menu-2 "></i></a>
                            <!-- LOGO -->
                            <div class="branding">
                                <a href="index.html"><img src="images/alpona-logo.png" alt="Alpona Logo"></a>
                            </div>
                        </div>
                        <div class="col-sm-4 col-md-4 responsive-notification-mnu">
                            <ul class="notification-bar">
                                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-bell"></i></a>
                                    <div class="dropdown-menu">
                                        <div class="dropdown-head">
                                            <h6>You have 10 new notifications</h6>
                                        </div>
                                        <ul class="notification-list">
                                            <li><a href="#" class="clearfix"><i class="icon-star blue"></i><span class="notification-intro">Donec pretium enim vel nisl viverra posuere.<span class="notification-time">8 min ago</span></span></a></li>
                                            <li><a href="#" class="clearfix"><i class=" icon-bell orange"></i><span class="notification-intro">Vestibulum viverra magna vitae dui volutpat dapibus. <span class="notification-time">3 hours ago</span></span></a></li>
                                            <li><a href="#" class="clearfix"><i class=" icon-bolt brown"></i><span class="notification-intro">Fusce eget ipsum in odio consectetur condimentum et id nisl.<span class="notification-time">5 hours ago</span></span></a></li>
                                            <li><a href="#" class="clearfix"><i class=" icon-ok-sign green"></i><span class="notification-intro">Mauris fringilla metus in mauris molestie tempor <span class="notification-time">8 hours ago</span></span></a></li>
                                        </ul>
                                        <div class="action-btn">
                                            <button class="btn btn-block">View All</button>
                                        </div>
                                    </div>
                                </li>
                                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="count-noty">12</span><i class="icon-envelop-opened"></i></a>
                                    <div class="dropdown-menu">
                                        <div class="dropdown-head">
                                            <h6>You have 32 new messages</h6>
                                        </div>
                                        <ul class="msg-list">
                                            <li class="clearfix"><a href="#"><span class="dropdown-thumb"><img width="40" height="40" alt="Avatar" src="images/avatar-40x40/binjal.png"></span><span><i>binjal</i> is posted an article. lacus est congue... </span><span class="notification-meta"> 12 hours ago </span></a></li>
                                            <li class="clearfix"><a href="#"><span class="dropdown-thumb"><img width="40" height="40" alt="Avatar" src="images/avatar-40x40/sharmin.png"></span><span><i>sharmin</i> is posted an article. lacus est congue... </span><span class="notification-meta"> 12 hours ago </span></a></li>
                                            <li class="clearfix"><a href="#"><span class="dropdown-thumb"><img width="40" height="40" alt="Avatar" src="images/avatar-40x40/shusi.png"></span><span><i>shusi</i> is posted an article. lacus est congue... </span><span class="notification-meta"> 12 hours ago </span></a></li>
                                            <li class="clearfix"><a href="#"><span class="dropdown-thumb"><img width="40" height="40" alt="Avatar" src="images/avatar-40x40/jamjam.png"></span><span><i>jamjam</i> is posted an article. lacus est congue... </span><span class="notification-meta"> 12 hours ago </span></a></li>
                                            <li class="clearfix"><a href="#"><span class="dropdown-thumb"><img width="40" height="40" alt="Avatar" src="images/avatar-40x40/sinha.png"></span><span><i>sinha</i> is posted an article. lacus est congue... </span><span class="notification-meta"> 12 hours ago </span></a></li>
                                        </ul>
                                        <div class="action-btn">
                                            <button class="btn btn-block">View All</button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-4 col-md-4 clearfix responsive-log-mnu">
                            <!-- ADMIN DRODOWN MENU -->
                            <div class="loged-nav pull-right">
                                <ul class="clearfix">
                                    <li class="log-nav dropdown pull-right"><a class="dropdown-toggle clearfix" data-toggle="dropdown">
                                            <span class="pull-left loged-user-name">Sharmin Sultana</span><span class="logged-user-thumb pull-right"><img class="img-circle" src="images/admin-avatar.jpg" alt="Admin"></span></a>
                                        <div class="dropdown-menu">
                                            <ul class="pull-right">
                                                <li><a href="#">kjamanebr@gmail.com</a></li>
                                                <li><a href="#">Edit Profile</a></li>
                                                <li><a href="#">Inbox</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#" class="logout-link"><i class="icon-lock-3"></i> Logout</a></li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- LEFT BAR -->
            <div class="left-bar merge-left">
                <!-- SEARCH BAR -->
                <div class="search-bar">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button"><i class="icon-search"></i></button>
                        </span>
                    </div>
                </div>
                <!-- LEFT NAV -->
                <div class="left-nav">
                    <ul class="side-navigation accordion" id="nav-accordion">
                        <li><a href="index.html"><i class="icon-home"></i> Home</a></li>
                        <li><a href="#"><i class="icon-list-alt"></i>Forms</a>
                            <ul>
                                <li><a href="form-elements.html"><i class="icon-double-angle-right"></i>All Form Elements</a></li>
                                <li><a href="extended-form-elements.html"><i class="icon-double-angle-right"></i> Extended Form Elements <span class="nav-instruction"> Lots of plugins is used here</span></a></li>
                                <li><a href="form-validation.html"><i class="icon-double-angle-right"></i>Form Validation</a></li>
                                <li><a href="form-wizard.html"><i class="icon-double-angle-right"></i>Stepy Form</a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="icon-table-2"></i>Tables</a>
                            <ul>
                                <li><a href="basic-table.html"><i class="icon-double-angle-right"></i> Basic Tables <span class="nav-instruction"> This is an instruction</span></a></li>
                                <li><a href="table-themes.html"><i class="icon-double-angle-right"></i> Tables-Theme</a></li>
                                <li><a href="data-tables.html"><i class="icon-double-angle-right"></i> Data Tables</a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="icon-columns"></i> Grid/Portlets</a>
                            <ul>
                                <li><a href="boxy-grids-porlets.html"><i class="icon-double-angle-right"></i> Boxy Grid/Portlets <span class="nav-instruction"> This is an instruction</span></a></li>
                                <li><a href="non-boxy-grids-porlets.html"><i class="icon-double-angle-right"></i> Non Boxy Grid/Portlets</a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="icon-laptop"></i> Layout &AMP; Dashboard</a>
                            <ul>
                                <li><a href="blank-layout.html"><i class="icon-double-angle-right"></i> Blank Layout <span class="nav-instruction"> This is an instruction</span></a></li>
                                <li><a href="fixed-topbar.html"><i class="icon-double-angle-right"></i> Fixed Topbar</a></li>
                                <li><a href="fixed-leftbar.html"><i class="icon-double-angle-right"></i> Fixed Leftbar</a></li>
                                <li><a href="top-dropdown-menu.html"><i class="icon-double-angle-right"></i> Top Dropdown Menu</a></li>
                                <li><a href="no-sidebar.html"><i class="icon-double-angle-right"></i> No Sidebar</a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="icon-font"></i> Typography</a>
                            <ul>
                                <li><a href="typography-boxy.html"><i class="icon-double-angle-right"></i> Boxy Typography <span class="nav-instruction"> This is an instruction</span></a></li>
                                <li><a href="typography-non-boxy.html"><i class="icon-double-angle-right"></i> Non Boxy Typography</a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="icon-cord"></i> UI Elements</a>
                            <ul>
                                <li><a href="bootstrap-ui.html"><i class="icon-double-angle-right"></i> Bootstrap UI <span class="nav-instruction"> This is an instruction</span></a></li>
                                <li><a href="jquery-ui.html"><i class="icon-double-angle-right"></i> jQuery UI</a></li>
                                <li><a href="extended-ui-elements.html"><i class="icon-double-angle-right"></i> Extended Elements<span class="nav-instruction"> More Cool UI elements plugins </span></a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="icon-tools"></i> Components &AMP; Plugins</a>
                            <ul>
                                <li><a href="buttons-icons.html"><i class="icon-double-angle-right"></i> Buttons &AMP; Icons</a></li>
                                <li><a href="wysiwyg.html"><i class="icon-double-angle-right"></i> WYSIWYG Text Editor</a></li>
                                <li><a href="calendar.html"><i class="icon-double-angle-right"></i> Calendar</a></li>
                                <li><a href="flot-chart.html"><i class="icon-double-angle-right"></i> Flot Chart</a></li>
                                <li><a href="google-chart.html"><i class="icon-double-angle-right"></i> Google Chart</a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="icon-files"></i> Example Pages</a>
                            <ul>
                                <li><a href="content-post.html"><i class="icon-double-angle-right"></i> Content Post</a></li>
                                <li><a href="login.html"><i class="icon-double-angle-right"></i> Login</a></li>
                                <li><a href="product-list.html"><i class="icon-double-angle-right"></i> Products List</a></li>
                                <li><a href="gallery.html"><i class="icon-double-angle-right"></i> Gallery Page</a></li>
                                <li><a href="search-page.html"><i class="icon-double-angle-right"></i> Search Page</a></li>
                                <li><a href="error-page.html"><i class="icon-double-angle-right"></i> Error Page</a></li>
                                <li><a href="invoice-page.html"><i class="icon-double-angle-right"></i> Invoice</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- SITE CONTAINER -->
            <div class="main-container">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <!-- SHORTCUT BAR -->
                            <div class="shortcut-bar">
                                <ul class="shortcut-items">
                                    <li><a href="#"><span class="count-noty">12</span><i class="icon-screen-3"></i><span class="shortcut-label">Dashboard</span></a></li>
                                    <li><a href="#"><i class="icon-cogs"></i><span class="shortcut-label">Settings</span></a></li>
                                    <li><a href="#"><i class="icon-chart"></i><span class="shortcut-label">Statistics</span></a></li>
                                    <li><a href="#"><i class="icon-users-2"></i><span class="shortcut-label">Users</span></a></li>
                                    <li><a href="#"><i class="icon-file-8"></i><span class="shortcut-label">Content</span></a></li>
                                    <li><a href="#"><i class="icon-briefcase"></i><span class="shortcut-label">Media</span></a></li>
                                    <li><a href="#"><i class="icon-stack-list"></i><span class="shortcut-label">Task List</span></a></li>
                                    <li><a href="#"><i class="icon-folder"></i><span class="shortcut-label">Files</span></a></li>
                                    <li><a href="#"><i class="icon-coin"></i><span class="shortcut-label">Income</span></a></li>
                                </ul>
                            </div>
                            <div class="page-header">
                                <h1><i class="icon-chart "></i> Chart <small>jQuery Flot chart</small></h1>
                            </div>
                            <ul class="breadcrumb">
                                <li><a href="#"><i class="icon-home"></i></a></li>
                                <li><a href="#">Library</a></li>
                                <li class="active">Chart</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <span class="h-icon"><i class="icon-stats-up"></i></span>
                                    <h4 class="pull-left">Visitors Chart</h4>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <div id="visitors-chart">
                                                <div id="visitors-container" style="width: 100%;height:300px; text-align: center; margin:0 auto;">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <span class="h-icon"><i class="icon-chart"></i></span>
                                    <h4 class="pull-left">Area Chart</h4>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <div id="area-chart">
                                                <div class="clearfix">
                                                    <form class="form-horizontal chart-control">
                                                        <div class="pull-left">
                                                            <label class="control-label">Toggle series :</label>
                                                            <div class="series-list">
                                                                <label class="checkbox inline">
                                                                    <input type="checkbox" id="cbdata1" checked>
                                                                    data1</label>
                                                                <label class="checkbox inline">
                                                                    <input type="checkbox" id="cbdata2" checked>
                                                                    data2 </label>
                                                                <label class="checkbox inline">
                                                                    <input type="checkbox" id="cbdata3" checked>
                                                                    data3 </label>
                                                            </div>
                                                        </div>
                                                    </form>
                                                    <div id="legendPlaceholderArea" class="pull-right">
                                                    </div>
                                                </div>
                                                <div id="area-chartContainer" style="width: 100%;height:300px;" class="clearfix">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <span class="h-icon"><i class="icon-stairs-down"></i></span>
                                    <h4 class="pull-left">Realtime Chart</h4>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <div id="reatltime-chart">
                                                <div id="reatltime-chartContainer" style="width:100%;height:300px; text-align: center; margin:0 auto;">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <span class="h-icon"><i class="icon-pie-4 "></i></span>
                                    <h4 class="pull-left">Member Signup</h4>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <div id="pie-chart" class="pie-chart">
                                                <div id="pie-chartContainer" style="width: 100%;height:400px; text-align: left;">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <span class="h-icon"><i class="icon-pie-4 "></i></span>
                                    <h4 class="pull-left">Member Signup Donut Chart</h4>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <div id="pie-chart-donut" class="pie-chart">
                                                <div id="pie-donutContainer" style="width: 100%;height:400px; text-align: left;">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <span class="h-icon"><i class="icon-bars-4"></i></span>
                                    <h4 class="pull-left">Combine Chart</h4>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <div id="combine-chart">
                                                <div id="legendcontainer26" class="legend-block">
                                                </div>
                                                <div id="combine-chartContainer" style="width: 100%;height:300px; text-align: center; margin:0 auto;">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <span class="h-icon"><i class="icon-bars-4"></i></span>
                                    <h4 class="pull-left">Toggle Chart</h4>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <div id="toggle-chart">
                                                <div class="clearfix">
                                                    <form class="form-horizontal pull-left chart-control">
                                                        <div class="control-group">
                                                            <label class="control-label">Chart Type :</label>
                                                            <div class="series-list">
                                                                <label class="checkbox inline">
                                                                    <input id="chartType1" checked name="ct" type="radio" value="line"/>
                                                                    Line Chart</label>
                                                                <label class="checkbox inline">
                                                                    <input id="chartType2" name="ct" type="radio" value="bar"/>
                                                                    Bar Chart </label>
                                                            </div>
                                                        </div>
                                                    </form>
                                                    <form class="form-horizontal chart-control pull-right chart-control">
                                                        <div class="control-group ">
                                                            <label class="control-label"> Toggle series :</label>
                                                            <div class="series-list">
                                                                <label class="checkbox inline">
                                                                    <input type="checkbox" id="cbdata1" checked>
                                                                    data1</label>
                                                                <label class="checkbox inline">
                                                                    <input type="checkbox" id="cbdata2" checked>
                                                                    data2 </label>
                                                                <label class="checkbox inline">
                                                                    <input type="checkbox" id="cbdata3" checked>
                                                                    data3 </label>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                                <div id="legendPlaceholder20">
                                                </div>
                                                <div id="toggle-chartContainer" style="width: 100%;height:300px; text-align: left;">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/jquery-ui-1.10.3.custom.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/prettify.js"></script>
        <!--jQuery touch scroll -->
        <script src="js/jquery.nicescroll.js"></script>
        <script src='js/jquery.cookie.js'></script>
        <script src='js/jquery.hoverIntent.minified.js'></script>
        <!--jQuery leftbar navigation accordion -->
        <script src='js/jquery.dcjqaccordion.2.7.js'></script>
        <script src="js/jquery.flot.js"></script>
        <script src="js/jquery.flot.selection.js"></script>
        <script src="js/excanvas.js"></script>
        <script src="js/jquery.flot.pie.js"></script>
        <script src="js/jquery.flot.stack.js"></script>
        <script src="js/jquery.flot.time.js"></script>
        <script src="js/jquery.flot.tooltip.js"></script>
        <script src="js/jquery.flot.resize.js"></script>
        <!-- Theme common script -->
        
        <script src='js/common-script.js'></script>
        <!--[if lte IE 7]>
                        <script src="js/font-alpona-ie7.js"></script>
                        <![endif]-->
        <script>
            $(function() {
                var data1 = GenerateSeries(0);
                var data2 = GenerateSeries(100);
                var data3 = GenerateSeries(200);
                var dataset = [data1, data2, data3];
                function GenerateSeries(added) {
                    var data = [];
                    var start = 100 + added;
                    var end = 200 + added;
                    for (i = 1; i <= 100; i++) {
                        var d = Math.floor(Math.random() * (end - start + 1) + start);
                        data.push([i, d]);
                        start++;
                        end++;
                    }
                    return data;
                }
                var options = {
                    series: {
                        lines: {
                            show: true,
                            fill: true
                        },
                        points: {
                            show: true,
                            lineWidth: 2,
                            fill: true,
                            fillColor: "#ffffff",
                            symbol: "circle",
                            radius: 2,
                        },
                        shadowSize: 0,
                    },
                    grid: {
                        hoverable: true,
                        clickable: true,
                        tickColor: "#f9f9f9",
                        borderWidth: 1
                    },
                    colors: ["#3498db", "#e67e22", "#3498db"],
                    tooltip: true,
                    tooltipOpts: {
                        defaultTheme: false
                    },
                    legend: {
                        position: 'nw',
                        labelBoxBorderColor: "#000000",
                        container: $("#area-chart #legendPlaceholderArea"),
                        noColumns: 0
                    }
                };
                function ToggleSeries() {
                    var d = [];
                    $("#area-chart input").each(function() {
                        if ($(this).is(":checked")) {
                            var seqence = $(this).attr("id").replace("cbdata", "");
                            d.push({
                                label: "data" + seqence,
                                data: dataset[seqence - 1]
                            });
                        }
                    });
                    $.plot($("#area-chart #area-chartContainer"), d, options);
                }
                $("#area-chart input").change(function() {
                    ToggleSeries();
                });
                ToggleSeries();
            });
        </script>
        <script>
            var data7_1 = [
                [1354586000000, 153],
                [1354587000000, 658],
                [1354588000000, 198],
                [1354589000000, 663],
                [1354590000000, 801],
                [1354591000000, 1080],
                [1354592000000, 353],
                [1354593000000, 749],
                [1354594000000, 523],
                [1354595000000, 258],
                [1354596000000, 688],
                [1354597000000, 364]
            ];
            var data7_2 = [
                [1354586000000, 53],
                [1354587000000, 65],
                [1354588000000, 98],
                [1354589000000, 83],
                [1354590000000, 80],
                [1354591000000, 108],
                [1354592000000, 120],
                [1354593000000, 74],
                [1354594000000, 23],
                [1354595000000, 79],
                [1354596000000, 88],
                [1354597000000, 36]
            ];
            $(function() {
                $.plot($("#visitors-chart #visitors-container"), [{
                        data: data7_1,
                        label: "Page View",
                        lines: {
                            fill: true
                        }
                    }, {
                        data: data7_2,
                        label: "Online User",
                        points: {
                            show: true
                        },
                        lines: {
                            show: true
                        },
                        yaxis: 2
                    }
                ],
                        {
                            series: {
                                lines: {
                                    show: true,
                                    fill: false
                                },
                                points: {
                                    show: true,
                                    lineWidth: 2,
                                    fill: true,
                                    fillColor: "#ffffff",
                                    symbol: "circle",
                                    radius: 5,
                                },
                                shadowSize: 0,
                            },
                            grid: {
                                hoverable: true,
                                clickable: true,
                                tickColor: "#f9f9f9",
                                borderWidth: 1
                            },
                            colors: ["#34495e", "#c0392b"],
                            tooltip: true,
                            tooltipOpts: {
                                defaultTheme: false
                            },
                            xaxis: {
                                mode: "time",
                                timeformat: "%0m/%0d %0H:%0M"
                            },
                            yaxes: [{
                                    /* First y axis */
                                }, {
                                    /* Second y axis */
                                    position: "right" /* left or right */
                                }]
                        }
                );
            });
        </script>
        <script>
            $(function() {
                var data1 = [];
                var totalPoints = 300;
                function GetData() {
                    data1.shift();
                    while (data1.length < totalPoints) {
                        var prev = data1.length > 0 ? data1[data1.length - 1] : 50;
                        var y = prev + Math.random() * 10 - 5;
                        y = y < 0 ? 0 : (y > 100 ? 100 : y);
                        data1.push(y);
                    }
                    var result = [];
                    for (var i = 0; i < data1.length; ++i) {
                        result.push([i, data1[i]])
                    }
                    return result;
                }
                var updateInterval = 100;
                var plot = $.plot($("#reatltime-chart #reatltime-chartContainer"), [
                    GetData()], {
                    series: {
                        lines: {
                            show: true,
                            fill: true
                        },
                        shadowSize: 0
                    },
                    yaxis: {
                        min: 0,
                        max: 100,
                        ticks: 10
                    },
                    xaxis: {
                        show: false
                    },
                    grid: {
                        hoverable: true,
                        clickable: true,
                        tickColor: "#f9f9f9",
                        borderWidth: 1
                    },
                    colors: ["#3498db"],
                    tooltip: true,
                    tooltipOpts: {
                        defaultTheme: false
                    }
                });
                function update() {
                    plot.setData([GetData()]);
                    plot.draw();
                    setTimeout(update, updateInterval);
                }
                update();
            });
        </script>
        <script>
            $(function() {
                var data = [{
                        label: "Paid Signup",
                        data: 60
                    }, {
                        label: "Free Signup",
                        data: 30
                    }, {
                        label: "Guest Signup",
                        data: 10
                    }];
                var options = {
                    series: {
                        pie: {
                            show: true
                        }
                    },
                    legend: {
                        show: true
                    },
                    grid: {
                        hoverable: true,
                        clickable: true
                    },
                    tooltip: true,
                    tooltipOpts: {
                        defaultTheme: false
                    }
                };
                $.plot($("#pie-chart #pie-chartContainer"), data, options);
            });
        </script>
        <script>
            $(function() {
                var data = [{
                        label: "Premium Member",
                        data: 40
                    }, {
                        label: "Gold Member",
                        data: 20
                    }, {
                        label: "Platinum Member",
                        data: 10
                    }, {
                        label: "Silver Member",
                        data: 30
                    }];
                var options = {
                    series: {
                        pie: {
                            show: true,
                            innerRadius: 0.5,
                            show: true
                        }
                    },
                    legend: {
                        show: true
                    },
                    grid: {
                        hoverable: true,
                        clickable: true
                    },
                    tooltip: true,
                    tooltipOpts: {
                        defaultTheme: false
                    }
                };
                $.plot($("#pie-chart-donut #pie-donutContainer"), data, options);
            });
        </script>
        <script>
            $(function() {
                var data24Hours = [
                    [0, 601],
                    [1, 520],
                    [2, 337],
                    [3, 261],
                    [4, 157],
                    [5, 78],
                    [6, 58],
                    [7, 48],
                    [8, 54],
                    [9, 38],
                    [10, 88],
                    [11, 214],
                    [12, 364],
                    [13, 449],
                    [14, 558],
                    [15, 282],
                    [16, 379],
                    [17, 429],
                    [18, 518],
                    [19, 470],
                    [20, 330],
                    [21, 245],
                    [22, 358],
                    [23, 74]
                ];
                var data48Hours = [
                    [0, 445],
                    [1, 592],
                    [2, 738],
                    [3, 532],
                    [4, 234],
                    [5, 143],
                    [6, 147],
                    [7, 63],
                    [8, 64],
                    [9, 43],
                    [10, 86],
                    [11, 201],
                    [12, 315],
                    [13, 397],
                    [14, 512],
                    [15, 281],
                    [16, 360],
                    [17, 479],
                    [18, 425],
                    [19, 453],
                    [20, 422],
                    [21, 355],
                    [22, 340],
                    [23, 801]
                ];
                var dataDifference = [
                    [23, -727],
                    [22, 18],
                    [21, -110],
                    [20, -92],
                    [19, 17],
                    [18, 93],
                    [17, -50],
                    [16, 19],
                    [15, 1],
                    [14, 46],
                    [13, 52],
                    [12, 49],
                    [11, 13],
                    [10, 2],
                    [9, -5],
                    [8, -10],
                    [7, -15],
                    [6, -89],
                    [5, -65],
                    [4, -77],
                    [3, -271],
                    [2, -401],
                    [1, -72],
                    [0, 156]
                ];
                var ticks = [
                    [0, "22h"],
                    [1, ""],
                    [2, "00h"],
                    [3, ""],
                    [4, "02h"],
                    [5, ""],
                    [6, "04h"],
                    [7, ""],
                    [8, "06h"],
                    [9, ""],
                    [10, "08h"],
                    [11, ""],
                    [12, "10h"],
                    [13, ""],
                    [14, "12h"],
                    [15, ""],
                    [16, "14h"],
                    [17, ""],
                    [18, "16h"],
                    [19, ""],
                    [20, "18h"],
                    [21, ""],
                    [22, "20h"],
                    [23, ""]
                ];
                var data = [{
                        label: "Last 24 Hours",
                        data: data24Hours,
                        lines: {
                            show: true,
                            fill: true
                        },
                        points: {
                            show: true
                        }
                    }, {
                        label: "Last 48 Hours",
                        data: data48Hours,
                        lines: {
                            show: true
                        },
                        points: {
                            show: true
                        }
                    }, {
                        label: "Difference",
                        data: dataDifference,
                        bars: {
                            show: true
                        }
                    }];
                var options = {
                    xaxis: {
                        ticks: ticks
                    },
                    series: {
                        shadowSize: 0
                    },
                    grid: {
                        hoverable: true,
                        clickable: true,
                        tickColor: "#f9f9f9",
                        borderWidth: 1
                    },
                    colors: ["#2980b9", "#ea701b"],
                    tooltip: true,
                    tooltipOpts: {
                        defaultTheme: false
                    },
                    legend: {
                        labelBoxBorderColor: "#000000",
                        container: $("#legendcontainer26"),
                        noColumns: 0
                    },
                };
                var plot = $.plot($("#combine-chart #combine-chartContainer"),
                        data, options);
            });
        </script>
        <script>
            $(function() {
                var data1 = GenerateSeries(0);
                var data2 = GenerateSeries(100);
                var data3 = GenerateSeries(200);
                var dataset = [data1, data2, data3];
                function GenerateSeries(added) {
                    var data = [];
                    var start = 100 + added;
                    var end = 200 + added;
                    for (i = 1; i <= 100; i++) {
                        var d = Math.floor(Math.random() * (end - start + 1) + start);
                        data.push([i, d]);
                        start++;
                        end++;
                    }
                    return data;
                }
                var options = {
                    series: {
                        stack: true,
                        shadowSize: 0
                    },
                    grid: {
                        hoverable: true,
                        clickable: true,
                        tickColor: "#f9f9f9",
                        borderWidth: 1
                    },
                    legend: {
                        position: 'nw',
                        labelBoxBorderColor: "#000000",
                        container: $("#bar-chart #legendPlaceholder20"),
                        noColumns: 0
                    }
                };
                var plot;
                function ToggleSeries() {
                    var d = [];
                    $("#toggle-chart input[type='checkbox']").each(function() {
                        if ($(this).is(":checked")) {
                            var seqence = $(this).attr("id").replace("cbdata", "");
                            d.push({
                                label: "data" + seqence,
                                data: dataset[seqence - 1]
                            });
                        }
                    });
                    options.series.lines = {};
                    options.series.bars = {};
                    $("#toggle-chart input[type='radio']").each(function() {
                        if ($(this).is(":checked")) {
                            if ($(this).val() == "line") {
                                options.series.lines = {
                                    fill: true
                                };
                            } else {
                                options.series.bars = {
                                    show: true
                                };
                            }
                        }
                    });
                    $.plot($("#toggle-chart #toggle-chartContainer"), d, options);
                }
                $("#toggle-chart input").change(function() {
                    ToggleSeries();
                });
                ToggleSeries();
            });
        </script>
    </body>
</html>